//load事件、window加载后的操作
window.addEventListener('load',function(){
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');

    //当鼠标经过preview_img时，显示mask遮罩和big大盒子
    preview_img.addEventListener('mouseover',function(){
        mask.style.display = 'block';
        big.style.display = 'block';
    })

    //当鼠标离开preview_img时，隐藏mask遮罩和big大盒子
    preview_img.addEventListener('mouseout',function(){
        mask.style.display = 'none';
        big.style.display = 'none';
    })

    //鼠标的盒子里面移动的坐标
    preview_img.addEventListener('mousemove',function(e){
        //1.计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x,y);
        //盒子高度的一半
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        //如果X <= 0
        if(maskX <= 0){
            maskX = 0;
        }else if(maskX >= maskMax){
            maskX = maskMax;   
        }
        if(maskY <= 0){
            maskY = 0;
        }else if(maskY >= maskMax){
            maskY = maskMax;   
        }

        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        //大图片移动距离 = 遮挡层移动距离 * 大图片最大移动距离(bigMax) / 遮挡层最大移动距离(maskMax)
        var bigIMG = document.querySelector('.bigImg');
        var bigMax = bigIMG.offsetWidth - big.offsetWidth;

        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMG.style.left = -bigX + 'px';
        bigIMG.style.top = -bigY + 'px';

        // var bigX = maskX * bigMax / maskMax;
        // var bigY = maskY * bigMax / maskMax;
        // bigIMG.style.left = -bigX + 'px';
        // bigIMG.style.top = -bigY + 'px';

    })


})